<script setup lang="ts">
import { ref, watch } from 'vue'

let props = defineProps({
  // 开始日期的占位符
  startPlaceholder: {
    type: String,
    default: '开始日期'
  },
  // 结束日期的占位符
  endPlaceholder: {
    type: String,
    default: '结束日期'
  },
  // 是否禁用选择今天之前的日期
  disabledBeforeToday: {
    type: Boolean,
    default: false
  }
})

let emits = defineEmits(['startChange', 'endChange'])

// 开始日期
let startDate = ref<Date | null>(null)
// 结束日期
let endDate = ref<Date | null>(null)
// 结束日期禁用
let endDateDisabled = ref<boolean>(true)

// 禁用开始日期的函数
let startDisabledDate = (time: Date) => {
  if (props.disabledBeforeToday) {
    return time.getTime() < Date.now() - 1000 * 60 * 60 * 24
  }
}

// 禁用结束日期的函数
let endDisabledDate = (time: Date) => {
  if (startDate.value) {
    return time.getTime() < startDate.value.getTime() + 1000 * 60 * 60 * 24
  }
}

// 监听开始日期
watch(
  () => startDate.value,
  val => {
    if (!val) {
      endDateDisabled.value = true
      endDate.value = null
    } else {
      emits('startChange', val)
      endDateDisabled.value = false
    }
  }
)

// 监听结束日期
watch(
  () => endDate.value,
  val => {
    if (val) {
      emits('endChange', {
        startDate: startDate.value,
        endDate: val
      })
    }
  }
)
</script>

<template>
  <div style="display: flex">
    <div style="margin-right: 20px">
      <el-date-picker
        v-model="startDate"
        type="date"
        :placeholder="props.startPlaceholder"
        :disabledDate="startDisabledDate"
        v-bind="$attrs.startOptions"
        style="width: 160px"
      ></el-date-picker>
    </div>
    <div>
      <el-date-picker
        v-model="endDate"
        type="date"
        :placeholder="props.endPlaceholder"
        :disabled="endDateDisabled"
        :disabledDate="endDisabledDate"
        v-bind="$attrs.endOptions"
        style="width: 160px"
      ></el-date-picker>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
